<template>
    <view class="rankinglist">
        <view class="firstone">
            <view>
                <image :src="noxa.avatar"></image>
                <view class="clow">{{noxa.nickname}}****</view>
                <view class="dvg">{{noxa.todayProfit}} {{noxa.coinName}}</view>
            </view>
        </view>
        <view class="secceng">
            <view class="ttw">
                <view class="shotd" style="text-align: center;">
                    <view class="juscen">
                        <image style="border: 1px solid #FFF12A;margin: 10px 0 0;" :src="noxb.avatar">
                        </image>
                        <view class="clow" style="font-size: 16px;color: #FFF12A;">
                            {{noxb.nickname}}****
                        </view>
                        <view class="dvg" style="font-size: 18px;color: #FFF12A;">
                            {{noxb.todayProfit}} {{noxb.coinName}}
                        </view>
                    </view>
                </view>
            </view>
            <view class="ttre">
                <view class="shotd">
                    <view class="juscen" style="text-align: center;">
                        <image style="border: 1px solid #FFF12A;margin: 10px 0 0;" :src="noxc.avatar">
                        </image>
                        <view class="clow" style="font-size: 16px;color: #FFF12A;">
                            {{noxc.nickname}}****
                        </view>
                        <view class="dvg" style="font-size: 18px;color: #FFF12A;">
                            {{noxc.todayProfit}} {{noxc.coinName}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="phblist">
            <view class="lis" v-for="(item,index) in arrtest" :key="index">
                <text class="xuh">{{index+1}}</text>
                <image class="txu" :src="item.avatar"></image>
                <view class="">
                    <view class="nidmk">{{item.userId}}****</view>
                    <view class="fonyd">今日<text>{{item.todayProfit}}</text></view>
                </view>
                <view class="fonyd">累计 <text>{{item.totalProfit}}</text></view>
                <view class="usdtnmsd">{{item.coinName}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    export default {
        data() {
            return {
                arrtest: [],
                noxa: [],
                noxb: [],
                noxc: []
            }
        },
        onLoad() {
            uinfo = uni.getStorageSync('userInfo');
            this.rankingListfn();
        },
        onPullDownRefresh() {
            console.log('refresh');

            this.rankingListfn();
        },
        methods: {
            rankingListfn() {
                request.postAssets('/assets/userWalletInfo/queryUserWalletInfo', {
                    sortAttribute: '3',
                    sortType: 'descend',
                    pageNumber: 1,
                    pageSize: 10
                }).then(res => {
                    console.log(res)
                    if (res.code == '200') {
                        uni.stopPullDownRefresh();
                        this.arrtest = res.data.items;

                        if (res.data.items[0] != undefined) {
                            this.noxa = res.data.items[0];
                        }
                        if (res.data.items[1] != undefined) {
                            this.noxc = res.data.items[1];
                        }
                        if (res.data.items[2] != undefined) {
                            this.noxb = res.data.items[2];
                        }


                        console.log(res.data.items[1])
                        res.data.items.map(item => {
                            item.userId = item.userId.substr(0, 4)
                        })
                    } else {
                        uni.stopPullDownRefresh();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
        }
    }
</script>

<style>
    .rankinglist {
        width: 750rpx;
        height: 2454rpx;
        background: url('../../static/img/phb.png') no-repeat;
        background-size: 100% 100%;
        padding: 74rpx 0 0 0;
    }


    /* #ifndef APP-PLUS */
    .firstone {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 130rpx 0 0 0;
    }

    /* #endif */
    /* #ifdef APP-PLUS */
    .firstone {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 120rpx 0 0 0;
    }

    /* #endif */
    .firstone image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        border: 1px solid #FFF12A;
    }

    .firstone .clow {
        font-size: 22px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 17px;
        color: #FFF12A;
    }

    .firstone .dvg {
        font-size: 22px;
        font-family: Aileron;
        font-weight: 500;
        line-height: 17px;
        color: #FFF12A;
        margin: 10rpx 0 0 0;
    }

    .shotd {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .shotd image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        border: 1px solid #f00;
    }

    .shotd .juscen .clow {
        font-size: 22px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 17px;
        color: #FF2A2A;
    }

    .shotd .juscen .dvg {
        font-size: 22px;
        font-family: Aileron;
        font-weight: 500;
        line-height: 17px;
        color: #FF2A2A;
        margin: 10px 0 0 0;
    }

    .secceng {
        display: flex;
        justify-content: space-around;
        margin: 10px 0 0 0;
    }

    /* #ifndef APP-PLUS */
    .secceng .ttw {
        margin: 80rpx 0 0 0;
    }

    .secceng .ttre {
        margin: 10rpx 0 0 0;
    }

    /* #endif */
    /* #ifdef APP-PLUS */
    .secceng .ttw {
        margin: 70rpx 0 0 0;
    }

    .secceng .ttre {
        margin: 0rpx 0 0 0;
    }

    /* #endif */
    /* #ifndef APP-PLUS */
    .phblist {
        padding: 290rpx 0 0 0;
        margin: 0 10px 0;
    }

    /* #endif */
    /* #ifdef APP-PLUS */
    .phblist {
        padding: 280rpx 0 0 0;
        margin: 0 10px 0;
    }

    /* #endif */
    /* #ifndef APP-PLUS */
    .phblist .lis {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 0 10px 36rpx;
        padding: 0 0 36rpx 0;
        border-bottom: 1px solid #D8E0FF;
    }

    /* #endif */
    /* #ifdef APP-PLUS */
    .phblist .lis {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 0 10px 22rpx;
        padding: 0 0 26rpx 0;
        border-bottom: 1px solid #D8E0FF;
    }

    /* #endif */
    .phblist .lis .xuh {
        /* width: 60rpx; */
        height: 60rpx;
    }

    .phblist .lis .txu {
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
    }

    .phblist .lis .fonyd {
        font-size: 12px;
        font-family: Aileron;
        font-weight: 400;
        color: #838AA4;
        width: 200rpx;
    }

    .phblist .lis .fonyd text {
        font-size: 12px;
        font-family: Aileron;
        font-weight: bold;
        color: #7F6AC3;
    }

    .phblist .lis .usdtnmsd {
        font-size: 12px;
        font-family: Aileron;
        font-weight: 400;
        color: #000000;
    }

    .phblist .lis .nidmk {
        font-size: 16px;
        font-family: Aileron;
        font-weight: 400;
        color: #FE8325;
        margin: 0 0 10rpx 0;
    }
</style>
